<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 根节点 title文字框-->
        <TreeTools :tree-node="company" :is-root="true" @addpets="sendNode" />
        <!-- 公司结构 -->
        <el-tree :data="departs" :props="defaultProps" default-expand-all>
          <TreeTools
            slot-scope="{data}"
            :tree-node="data"
            @addpets="sendNode"
            @changeDepartments="getDepartments"
            @editDepts="editDepts"
          />
        </el-tree>
      </el-card>
    </div>
    <!-- 显示的页面结构 -->
    <addDept ref="addDept" :show-dialog.sync="showDialog" :node="node" @addParts="addParts" />
  </div>
</template>

<script>
import TreeTools from './components/tree-tools.vue'
import addDept from './components/add-departs.vue'
import { getDepartments } from '@/api/departments'
// import { addDepartments } from '@/api/departments'
import { tranListToTreeData } from '@/utils'
export default {
  components: {
    TreeTools,
    addDept
  },
  data() {
    return {
      departs: [
        {
          name: '总裁办',
          manager: '曹操',
          children: [{ name: '董事会', manager: '曹丕' }]
        },
        { name: '行政部', manager: '刘备' },
        { name: '人事部', manager: '孙权' }
      ],
      defaultProps: {
        label: 'name' // 表示 从这个属性显示内容
      },
      company: { name: '', manager: '负责人', id: '' },
      showDialog: false,
      node: null, // 表示当前点击的部门
      age: 0
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    async getDepartments() { // 定义一个获取 数据的函数  方便多次调用
      const result = await getDepartments()
      this.company.name = result.companyName
      this.departs = tranListToTreeData(result.depts, '') // 把扁平化的数组 转换为 树形结构
    },
    //  点击添加时 把点击的部门 传给 编辑面板这个子组件 并且让编辑面板显示
    sendNode(obj) { // 把点击当前的这个对象，传递回来 再传个添加面板 让其知道 自己是再给谁添加部门
      this.node = obj
      this.showDialog = true
    },
    //  添加子节点成功后的
    async addParts() { // 当子组件发起添加数据成功后 父组件立刻获取新的数据 渲染  // 编辑面板关闭 sync这个修饰符
      this.getDepartments()
      this.$message.success('成功')
    },
    // 编辑子节点 通过refs 获取子组件这个对象 再调用子组件里面 渲染form表单的 网络请求方法
    editDepts(node) {
      this.node = node
      this.showDialog = true
      this.$refs.addDept.getDepartDetail(node.id)
    }
  }
}
</script>
<style scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
.el-dropdown {
  cursor: pointer;
}
</style>
